﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Input, Number Input, Currency Input, Percentage Input, Floating-Point Input, Decimal Input, jqxMaskedInput" />
    <meta name="description" content="This demo demonstrates how to trigger the jqxMaskedInput's valuechanged and textchanged events." />
    <title id='Description'>This demo demonstrates how to trigger the jqxMaskedInput's valuechanged and textchanged events.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();

            // Create jqxMaskedInput
            $("#numericInput").jqxMaskedInput({ width: '250px', height: '25px', mask: '(###)###-####', theme: theme });

            $('#Events').css('border', 'none');
            $('#Events').jqxPanel({ theme: theme, height: '250px', width: '300px' });

            $('#numericInput').bind('valuechanged', function (event) {
                var value = event.args.value;
                if (value == null) value = '';
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Value: ' + value + '</div>');
            });
            $('#numericInput').bind('textchanged', function (event) {
                $('#Events').jqxPanel('clearcontent');
                var text = event.args.text;
                $('#Events').jqxPanel('prepend', '<div style="margin-top: 5px;">Text: ' + text + '</div>');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
         <div style='margin-top: 10px;'>
            Phone Number</div>
              <div style='margin-top: 3px;' id='numericInput'>
        </div>
           <div style='margin-left: 0px; margin-top: 20px; float: left;'>
                <div>
                    <span>
                        Events:</span>
                    <div id='Events'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
